<template>
    <div class="basic-wrapper">
        <div class="title">
            <span>基本信息</span>
            <el-icon color="#409eff" @click="edit" v-if="detailData"><Edit /></el-icon>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <el-descriptions v-if="detailData" :column="4" border>
                    <el-descriptions-item :span="3">
                        <template #label> 模型名称 </template>
                        {{ detailData.displayName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1">
                        <template #label> 标识符 </template>
                        {{ detailData.objectName }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                        <template #label>
                            <div class="label">
                                <span>模型性质</span>
                                <el-tooltip>
                                    <template #content>
                                        <div style="max-width: 200px">
                                            1、父模型<br />
                                            父模型类似于Java的抽象类，区别是父模型是所有对象模型的集合体，是所有对象模型特征的汇总。只可被继承，不可直接被使用(类似于Java中的抽象类不可以实例化)，可以使用继承的对象模型进行对应业务配置
                                            父模型中定义的属性、事件等，标注为“模型XX”描述的配置，所有继承的对象模型都需要包含。标注为“子模型XX”描述的配置，为某一个或多个对象模型特有
                                            <br />2、对象模型<br />
                                            对象模型创建时，必须选择对应的父模型，对象模型可以选择父模型中定义的属性、方法、事件等配置，也可以独立进行定义（定义后也会被父模型包含）
                                            对象模型需要增加父模型关系表、对象模型属性关系表、对象模型事件关系表、对象模型行为关系表等等。最终在使用加载到缓存时，按照单一模型规格进行加载以方便使用
                                            <br />3、单一模型<br />
                                            单一的模型定义，不可被继承，与其他模型没有关联关系。
                                        </div>
                                    </template>
                                    <el-icon size="14px"><InfoFilled /></el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                        {{ modifierType[detailData.modifierType] }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="1">
                        <template #label>
                            <div class="label">
                                <span>模型用途</span>
                                <el-tooltip>
                                    <template #content>
                                        <div style="max-width: 200px">
                                            1、业务模型<br />
                                            业务模型作为产品的业务性模型对象配置使用，可针对业务模型进行对应的增删改查操作。对应的表映射到对应的关系数据库中
                                            <br />2、物模型<br />
                                            物模型是一种对物理实体进行数字化语义描述的方法，配置物模型的对象，对应的后续页面配置应按物模型元素要求进行切换。对应的表映射到对应的时序数据库中
                                            物模型分为产品和组件，产品可由物联网平台进行通讯如采集器，组件不与物联网直接通讯，需由产品来传递讯息，如采集器下的户阀/温控器等。
                                            <br />3、视图模型<br />
                                            视图模型作为数据的展示使用，可用于数据报表展现、导出、数据BI展示等，视图模型在系统内不可以通过页面进行数据修改。对应的表映射到对应的关系数据库或分析数据库中
                                        </div>
                                    </template>
                                    <el-icon size="14px"><InfoFilled /></el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                        {{ usageType[detailData.usageType] }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                        <template #label> 模型能力 </template>
                        <div class="img-item-value">
                            <el-tag v-for="item in capabilitiesConfig" :key="item" effect="plain">
                                {{ item }}
                            </el-tag>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="1">
                        <template #label>
                            <div class="label">
                                <span>模型类型</span>
                                <el-tooltip>
                                    <template #content>
                                        <div style="max-width: 200px">
                                            1、系统模型<br />
                                            支撑系统运行的内置模型对象，不可修改删除
                                            <br />2、标准模型<br />
                                            系统配置的配合产品使用或展示的模型对象
                                            <br />3、项目自定义模型<br />
                                            不是产品规划的模型对象，对应项目业务而配置的对象
                                        </div>
                                    </template>
                                    <el-icon size="14px"><InfoFilled /></el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                        {{ objectType[detailData.objectType] }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label> 创建人 </template>
                        {{ detailData.creator }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label> 创建时间 </template>
                        {{ detailData.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label> 当前版本 </template>
                        <div class="version-item-value">
                            <div>{{ detailData.metadataVersion || '--' }}</div>
                            <el-button type="primary" link disabled> 查看历史版本 </el-button>
                        </div>
                    </el-descriptions-item>
                    <!--                    <el-descriptions-item>-->
                    <!--                        <template #label> 全局搜索 </template>-->
                    <!--                        <el-switch :model-value="detailData.searchEnabled" />-->
                    <!--                    </el-descriptions-item>-->
                    <el-descriptions-item :span="4">
                        <template #label> 描述 </template>
                        <div class="value">{{ detailData.description }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item :span="4">
                        <template #label> 图片 </template>
                        <div class="value img-item-value">
                            <Icon :type="detailData.icon" v-if="detailData.icon" size="32px"></Icon>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import type { SysMetadataObject } from '@great/services';
import { modifierType, objectType, usageType } from '@/utils/constant';
import { InfoFilled, Edit } from '@element-plus/icons-vue';
import { Icon } from '@great/components';
import { showPopupBox } from '@great/utils';
import CreateEdit from '../../../list/CreateEditModal.vue';

const props = defineProps<{
    detailData?: SysMetadataObject;
}>();
const initModelDetail = inject('initModelDetail');
const loading = ref(true);
const capabilitiesConfig = ref<Array<string>>([]); // 模型能力
const capabilitiesConfigList = {
    持久化能力: { capacity: 'Persistent Object', config: {} },
    数据权限能力: { capacity: 'Data Permission', config: {} },
    逻辑删除能力: { capacity: 'Logically Deleted', config: {} },
    物模型组件能力: { capacity: 'Thing Component', config: {} },
    '附件能力（文件存储）': { capacity: 'With Attachment Object', config: {} }
};
const edit = () => {
    showPopupBox(CreateEdit, {
        row: props.detailData as any,
        getList: initModelDetail as () => Promise<void>
    });
};

// 特殊值反显处理
const reverseDisplay = () => {
    // 模型能力
    if (props.detailData && props.detailData.capabilitiesConfig) {
        const casualArr = JSON.parse(props.detailData.capabilitiesConfig);
        capabilitiesConfig.value = [];
        Array.isArray(casualArr) &&
            casualArr.forEach(item => {
                const target = Object.keys(capabilitiesConfigList).find(
                    key => capabilitiesConfigList[key].capacity === item.capacity
                );
                if (target) capabilitiesConfig.value.push(target);
            });
    }
};

watch(
    () => props.detailData,
    newValue => {
        if (newValue) {
            loading.value = false;
            reverseDisplay();
        }
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.basic-wrapper {
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > span {
            margin-right: 5px;
        }
        .el-icon {
            cursor: pointer;
        }
    }
    .el-descriptions {
        .label {
            display: flex;
            align-items: center;
            > span {
                margin-right: 3px;
            }
        }
        .value {
            height: 64px;
        }
        .version-item-value {
            display: flex;
            justify-content: space-between;
        }
        .img-item-value {
            display: flex;
            align-items: center;
        }
        :deep(.el-switch) {
            .el-switch__core {
                cursor: default;
            }
        }
        .el-tag + .el-tag {
            margin-left: 5px;
        }
    }
}
</style>
